@use "sass:math";

@mixin wh($width, $height) {
  width: $width;
  height: $height;
}

@mixin abs($top: 50%, $left: 50%) {
  position: absolute;
  top: $top;
  left: $left;
  @content;
}

@mixin abs-tl($top: 50%, $left: 50%, $util: "%") {
  $t: unset;
  $l: unset;
  @if $util == "%" {
    $t: $top;
    $l: $left;
  } @else if
    $util ==
    "px" or
    $util ==
    "rem" or
    $util ==
    "em" or
    $util ==
    "vh" or
    $util ==
    "vw"
  {
    $t: unquote($top + $util);
    $l: unquote($left + $util);
  }
  position: absolute;
  top: $t;
  left: $l;
  // @debug unit($top);
}

@mixin abs-tr($top: 50%, $right: 50%) {
  position: absolute;
  top: $top;
  right: $right;
}

@mixin abs-bl($bottom: 50%, $left: 50%) {
  position: absolute;
  bottom: $bottom;
  left: $left;
}
@mixin abs-br($bottom: 50%, $right: 50%) {
  position: absolute;
  bottom: $bottom;
  right: $right;
}

@mixin left50 {
  @include abs(unset, 50%);
  transform: translateX(-50%);
}
@mixin top50 {
  @include abs(50%, unset);
  transform: translateY(-50%);
}
@mixin centered {
  @include abs(50%, 50%) {
    transform: translate(-50%, -50%);
  }
  @content;
}

@mixin rect($width, $height, $bg-color: inherit, $bdrs: null) {
  @include wh($width, $height);
  background: $bg-color;
  border-radius: $bdrs;
}

@mixin flex($direction: row, $justify-content: center, $align-items: center) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify-content;
  align-items: $align-items;
}

@mixin circle($diameter, $bg-color: #fff) {
  @include rect($diameter, $diameter, $bg-color);
  border-radius: 50%;
}

/// 绝对位置居中；
/// @author:hzq;
/// @params: {Length} $width - 宽度;
/// @params: {Length} $height - 高度;
/// @example: @include middle(100px, 100px);
@mixin middle($w, $h) {
  @include abs(50%, 50%);
  @include wh($w, $h);
  transform: translate(-50%, -50%);
}

@mixin pseudo($content: "") {
  position: absolute;
  content: $content;
}

@mixin pseudo-ba() {
  &::before,
  &::after {
    @include pseudo();
    @content;
  }
}

@mixin longShadow(
  $type: text,
  $color: #000,
  $length: 100px,
  $fadeout: true,
  $skew: false,
  $direction: right
) {
  $shadow: "";
  @if $skew == false or $type == text {
    @if $direction == right {
      @for $i from 0 to $length - 1 {
        $shadow: $shadow + $i + "px " + $i + "px 0 " + $color + ",";
      }
    }
    @if $direction == left {
      @for $i from 0 to $length - 1 {
        $shadow: $shadow + $i * -1 + "px " + $i + "px 0 " + $color + ",";
      }
    }
  }
  @if $fadeout == true {
    @for $i from 0 to $length - 1 {
      @if ($type == text) or ($skew ==false) {
        @if $direction == right {
          $shadow: $shadow +
            $i +
            "px " +
            $i +
            "px 0 " +
            rgba($color, 1 - $i / $length) +
            ",";
        }
        @if $direction == left {
          $shadow: $shadow +
            $i *
            -1 +
            "px " +
            $i +
            "px 0 " +
            rgba($color, 1 - $i / $length) +
            ",";
        }
      }
      @if ($type == box) and ($skew == true) {
        @if $direction == right {
          $shadow: $shadow +
            $i +
            "px " +
            $i +
            "px 0 " +
            $i *
            0.2 +
            "px " +
            rgba($color, 1 - $i / $length) +
            ",";
        }
        @if $direction == left {
          $shadow: $shadow +
            $i *
            -1 +
            "px " +
            $i +
            "px 0 " +
            $i *
            0.2 +
            "px " +
            rgba($color, 1 - $i / $length) +
            ",";
        }
      }
    }
    $shadow: $shadow + $length + "px " + $length + "px 0 " + rgba($color, 0);
  }
  @if $fadeout == false {
    @if ($skew == true) and ($type == box) {
      @for $i from 0 to $length - 1 {
        $shadow: $shadow +
          $i +
          "px " +
          $i +
          "px 0 " +
          $i *
          0.1 +
          "px " +
          $color +
          ",";
      }
    }
    $shadow: $shadow + $length + "px " + $length + "px 0 " + rgba(0, 0, 0, 0);
  }
  $shadow: unquote($shadow);
  @if $type == text {
    text-shadow: $shadow;
  }
  @if $type == box {
    box-shadow: $shadow;
  }
}

/// Mixin to customize scrollbars
/// Beware, this does not work in all browsers
/// @author Hugo Giraudel
/// @param {Length} $size - Horizontal scrollbar's height and vertical scrollbar's width
/// @param {Color} $foreground-color - Scrollbar's color
/// @param {Color} $background-color [mix($primary, white, 75%)] - Scrollbar's color
/// @example scss - Scrollbar styling
///   @include scrollbars(.5em, slategray);
@mixin scrollbars(
  $size,
  $foreground-color,
  $background-color: mix($foreground-color, white, 50%)
) {
  ::-webkit-scrollbar {
    width: $size;
    height: $size;
  }
  ::-webkit-scrollbar-thumb {
    background: $foreground-color;
  }
  ::-webkit-scrollbar-track {
    background: $background-color;
  }
}

@mixin list-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}

@mixin _clearfix {
  zoom: 1;
  &:after,
  &:before {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
  }
  &:after {
    clear: both;
  }
}

/// 弹起动画效果；可以用在hover等需要动画的元素上
@mixin _bounce-effect-animation($color) {
  @keyframes bounce-effect-animation {
    0%,
    100% {
      box-shadow: 0 0 0 10px lightness($color, 10%);
    }
    25%,
    75% {
      box-shadow: 0 0 0 8px $color;
    }
    50% {
      box-shadow: 0 0 0 5px darken($color, 10%);
    }
  }
}

@mixin init($background: #333, $color: #fff) {
  html {
    font-size: 62.5%;
    box-sizing: border-box;
    * {
      margin: 0;
      padding: 0;
      box-sizing: inherit;
      &::before,
      &::after {
        box-sizing: inherit;
      }
    }
    body {
      // Body font size 16px
      font-size: 1.6rem;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: $color;
      @include rect(100%, 100vh, $background);
    }
  }
  :root {
    // VARIABLES
    @content;
  }
}
